<template>
  <!--  主界面-->
  <div class="home">
    <!--    艺术字-->
    <div class="word-art">
      <img alt="" src="../assets/images/logo1.png">
    </div>
    <!--    tab切换 专题列表-->
    <div class="topic-list">
      <van-tabs v-model="active" animated class="category-list" @click="onclick">
        <van-tab v-for="item in category" :key="item.categoryId" :title="item.name">
          <div v-for="(item1,index) in list" v-show="!flag" :key="index" class="box">
            <div class="bar-owner">
              <router-link :to="{path:'/author_detail',query:{userId:item1.userId}}" style="display: inline-block">
                <img :src="item1.avatar" alt="">
              </router-link>
              <b>{{ item1.userName }}</b>
              <!--   删除帖子（临时）--------  ----------->
              <!--              <a class="delete" @click="deleteNode(item1.postsId)">删除!(慎用)</a>-->
            </div>
            <router-link :to="{path:'/nodeDetail',query:{postsId:item1.postsId}}" class="bar-details" tag="div">
              <img v-lazy="item1.coverImgUrl" alt="图片库比较少">
              <div class="text">
                <p class="title"> {{ item1.title }}</p>
                <p class="intro">{{ item1.intro }}</p>
                <!--                <p class="time">{{ item1.createTime }}</p>-->
              </div>
            </router-link>
          </div>
          <div v-show="flag">
            <van-loading color="blue" size="24px" vertical>加载中...</van-loading>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="backTo" @click="home">
      <van-icon name="back-top"/>
    </div>
    <!--    更多小功能-->
    <oneiromancy></oneiromancy>
  </div>
</template>

<script>
// @ is an alias to /src
import {getCategory, getNoteList} from '../api/api'
import oneiromancy from "@/components/Oneiromancy";
import {delNode} from '../api/api'
import {Toast} from 'vant';

export default {
  name: 'Home',
  data() {
    return {
      active: 2,
      //专题列表数组
      category: [],
      //  帖子列表数组
      bbsList: [],
      list: [],
      flag: false
    };
  },
  created() {
    //获取分类列表
    getCategory().then(res => {
      this.category = res.rows
    });
    //获取帖子列表
    getNoteList().then(res => {
      this.list = res.rows;
    })
  },
  methods: {
    //点击列表获取帖子
    onclick(id) {
      this.flag = true
      setTimeout(() => {
        //获取帖子列表
        getNoteList().then(res => {
          this.bbsList = res.rows;
          this.bbsList.filter(item => {
            if (item.categoryId == id + 1) {
              this.list.unshift(item)
            }
          })
          // console.log(this.list)
        })
        this.flag = false
      }, 1000)
    },
    //返回顶部
    home() {
      var timer = setInterval(function () {
        document.body.scrollTop -= 1000;
        document.documentElement.scrollTop -= 1000;
        if (document.body.scrollTop == 0 && document.documentElement.scrollTop == 0) {
          clearInterval(timer);
        }
      }, 5)
    },
    //删除帖子（测试专用）
    deleteNode(postsId) {
      delNode(postsId).then(res => {
        if (res.code == '0') {
          Toast.success('删除成功！！');
        } else {
          Toast.fail('删除失败');
        }
      })
    }
  },
  components: {
    oneiromancy
  }

}
</script>
<style lang="less" scoped>
.word-art {
  width: 100%;
  height: 60px;
  position: fixed;
  z-index: 5;
  background-color: #f8f8f8;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/ .van-tabs__wrap {
  position: fixed;
  top: 60px;
  z-index: 5;
}

/deep/ .van-tabs__content {
  padding-top: 100px;
}

.box {
  margin-bottom: 20px !important;
}

//帖子列表
//吧主
.bar-owner {
  width: 100%;
  padding: 10px;

  img {
    //先这样一会解决bug
    background: url("../assets/images/logo2.png");
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid red;
    vertical-align: middle;
  }

  b {
    padding-left: 13px;
  }
}

//贴吧简述内容
.bar-details {
  padding: 10px;
  border: 1px solid darkgrey;
  border-radius: 20px;


  img {
    background-image: url("../assets/images/logo2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    //height: 60%;
    border-radius: 10px;
  }

  .text {
    width: 100%;

    .title {
      font-size: 18px;
      text-align: center;
      font-weight: 600;
    }

    .intro {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .time {
      font-size: 12px;
      float: right;
    }
  }
}

//返回顶部
.backTo {
  width: 50px;
  height: 50px;
  //border: 1px solid darkgrey;
  z-index: 222;
  position: fixed;
  right: 10px;
  bottom: 50px;
  font-size: 50px;
  opacity: 0.7;

}

.delete {
  margin-left: 50px;
  color: red;
  font-weight: 700;
  box-shadow: 0 0 5px black;
  border-radius: 10px;
  padding: 5px 10px;
}
</style>